<template>
    <div class="container">
        <div style="border: 1px solid #EBEEF5;padding: 10px;margin-bottom: 40px;">
            <div style="margin-bottom: 20px;">调试</div>
            <div style="margin-bottom: 20px;">
                <el-button type="primary" @click="readData(1)">读取</el-button>
                <el-button type="success" @click="readData(2)">设置</el-button>
            </div>
            <div>
                <el-table  stripe :data="controlForm" style="width: 100%"
                          border class="table" ref="multipleTable" @selection-change="selectChangeTable">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column prop="deviceCode" align="center" label="设备编号">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" v-model="scope.row.deviceCode" size="mini" placeholder="编号"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="deviceGroup" align="center" label="设备群号">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" v-model="scope.row.deviceGroup" size="mini" placeholder="群号"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="colector" align="center" label="选择网关">
                        <template slot-scope="scope">
                            <el-select class="no-border-input" v-model="scope.row.colector" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.deviceId"
                                        :label="item.deviceName"
                                        :value="item.deviceId">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="t1" align="center" label="时1(0-23)">
                        <template slot-scope="scope">
                            <el-input type="number" min="00" max="23" class="no-border-input" v-model="scope.row.t1" size="mini" placeholder="时1(0-23)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="m1" align="center" label="分1(00-59)">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="00" max="59" v-model="scope.row.m1" size="mini" placeholder="分1(00-59)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="c1" align="center" label="操作1">
                        <template slot-scope="scope">
                            <el-select class="no-border-input" v-model="scope.row.c1" placeholder="请选择">
                                <el-option
                                        v-for="item in controlData"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="t2" align="center" label="时2(0-23)">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="00" max="23" v-model="scope.row.t2" size="mini" placeholder="时2(0-23)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="m2" align="center" label="分2(00-59)">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="00" max="59" v-model="scope.row.m2" size="mini" placeholder="分2(00-59)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="c2" align="center" label="操作2">
                        <template slot-scope="scope">
                            <el-select class="no-border-input" v-model="scope.row.c2" placeholder="请选择">
                                <el-option
                                        v-for="item in controlData"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="t3" align="center" label="时3(0-23)">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="00" max="23" v-model="scope.row.t3" size="mini" placeholder="时3(0-23)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="m3" align="center" label="分3(00-59)">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="00" max="59" v-model="scope.row.m3" size="mini" placeholder="分3(00-59)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="c3" align="center" label="操作3">
                        <template slot-scope="scope">
                            <el-select class="no-border-input" v-model="scope.row.c3" placeholder="请选择">
                                <el-option
                                        v-for="item in controlData"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="t4" align="center" label="时4(0-23)">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="00" max="23" v-model="scope.row.t4" size="mini" placeholder="时4(0-23)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="m4" align="center" label="分4(00-59)">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="00" max="59" v-model="scope.row.m4" size="mini" placeholder="分4(00-59)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="c4" align="center" label="操作4">
                        <template slot-scope="scope">
                            <el-select class="no-border-input" v-model="scope.row.c4" placeholder="请选择">
                                <el-option
                                        v-for="item in controlData"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div style="border: 1px solid #EBEEF5;padding: 10px">
            <div style="margin-bottom: 20px;">校时</div>
            <div style="margin-bottom: 20px;">
                <el-button type="primary" @click="readTime(1)" v-if="isEuiment">读取</el-button>
                <el-button type="success" @click="readTime(2)">设置</el-button>
                <el-button type="primary" @click="isGroup=true;isEuiment=false;">群组校时</el-button>
                <el-button type="primary" @click="isEuiment=true;isGroup=false;">设备校时</el-button>
            </div>
            <div>
                <el-table stripe :data="dateList" style="width: 100%"
                          border class="table" ref="multipleTable" @selection-change="selectChangeTable">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column prop="deviceCode" align="center" label="设备编号"  v-if="!isGroup">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" v-model="scope.row.deviceCode" size="mini" placeholder="编号"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="deviceGroup" align="center" label="设备群号" v-if="isGroup">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" v-model="scope.row.deviceGroup" size="mini" placeholder="群号"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="colector" align="center" label="选择网关">
                        <template slot-scope="scope">
                            <el-select class="no-border-input" v-model="scope.row.colector" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.deviceId"
                                        :label="item.deviceName"
                                        :value="item.deviceId">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="t1" align="center" label="秒">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="00" max="59" v-model="scope.row.t1" size="mini" placeholder="00-59"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="t2" align="center" label="分">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="00" max="59" v-model="scope.row.t2" size="mini" placeholder="00-59"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="t3" align="center" label="时">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="00" max="23" v-model="scope.row.t3" size="mini" placeholder="00-23"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="t4" align="center" label="日">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="1" max="31" v-model="scope.row.t4" size="mini" placeholder="1-31"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="t5" align="center" label="月">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="1" max="12" v-model="scope.row.t5" size="mini" placeholder="1-12"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="t6" align="center" label="周">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="1" max="7" v-model="scope.row.t6" size="mini" placeholder="1-7"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="t7" align="center" label="年">
                        <template slot-scope="scope">
                            <el-input class="no-border-input" type="number" min="00" max="99" v-model="scope.row.t7" size="mini" placeholder="00-99"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    import {getAdministrationPage} from '../../../api/index';
    export default {
        name: "deviceDebug",
        data(){
            return {
                controlForm:[
                        {
                            deviceCode:'',
                            deviceGroup:'',
                            colector:'',
                            t1:'',m1:'',c1:'',
                            t2:'',m2:'',c2:'',
                            t3:'',m3:'',c3:'',
                            t4:'',m4:'',c4:'',
                        }
                ],
                dateList:[
                    {
                        deviceCode:'',
                        deviceGroup:'',
                        colector:'',
                        t1:'',
                        t2:'',
                        t3:'',
                        t4:'',
                        t5:'',
                        t6:'',
                        t7:'',
                    }
                ],
                multipleTable:[],
                cur_page:1,
                page_size:1000,
                options: [],
                value: '',
                isGroup:false,
                isEuiment:true,
                isCheckTime:false,
                controlData:[
                    {name:'通电',value:0},
                    {name:'断电',value:1}
                    ],
            }
        },
        created(){
            this.getData()
        },
        methods:{
            //获取数据以及分页
            getData(){
                //分页接口
                getAdministrationPage({
                    pageNum:this.cur_page,
                    pageSize:this.page_size
                }).then((res) =>{
                    console.log(res)
                    // console.log(res.data)
                    this.options = res.data.list;
                })
            },
            selectChangeTable(val){
                console.log(val)
            },
            readData(v){

                if(!this.controlForm[0].deviceCode){
                    this.$message.error('请填写编号');
                    return ;
                }
                if(!this.controlForm[0].colector){
                    this.$message.error('请选择网关');
                    return ;
                }
                console.log(this.controlForm)
                var str='';
                if(v==1){
                    console.log('读取数据');
                    this.isCheckTime = false;
                    str = 'readActionTime,'+this.controlForm[0].colector+','+this.controlForm[0].deviceCode;
                }else{
                    console.log('设置数据');
                    this.isCheckTime = true;
                    if(!this.controlForm[0].deviceGroup){
                        this.$message.error('请填写群组号');
                        return ;
                    }
                    console.log(!this.controlForm[0].t1)
                    if(!this.controlForm[0].t1||!this.controlForm[0].t2||!this.controlForm[0].t3||!this.controlForm[0].t4){
                        this.$message.error('请填写时段');
                        return ;
                    }
                    if(!this.controlForm[0].m1||!this.controlForm[0].m2||!this.controlForm[0].m3||!this.controlForm[0].m4){
                        this.$message.error('请填写分段');
                        return ;
                    }

                    if((this.controlForm[0].c1==='')||(this.controlForm[0].c2==='')||(this.controlForm[0].c3==='')||(this.controlForm[0].c4==='')){
                        this.$message.error('请选择操作');
                        return ;
                    }

                    str = 'setActionTime,'+this.controlForm[0].colector+','+this.controlForm[0].deviceCode+','+this.controlForm[0].deviceGroup+','+
                        this.controlForm[0].c1+'|'+this.controlForm[0].t1+'|'+this.controlForm[0].m1+'&'+
                        this.controlForm[0].c2+'|'+this.controlForm[0].t2+'|'+this.controlForm[0].m2+'&'+
                        this.controlForm[0].c3+'|'+this.controlForm[0].t3+'|'+this.controlForm[0].m3+'&'+
                        this.controlForm[0].c4+'|'+this.controlForm[0].t4+'|'+this.controlForm[0].m4;
                }


                this.socketApi.sendSock(this,str,(data)=>{
                    this.getData();
                    var strData = JSON.parse(data).message.split(',');
                    console.log(strData);
                    if(strData.length==7){
                        this.dateList[0].t1 = strData[0];
                        this.dateList[0].t2 = strData[1];
                        this.dateList[0].t3 = strData[2];
                        this.dateList[0].t4 = strData[3];
                        this.dateList[0].t5 = strData[4];
                        this.dateList[0].t6 = strData[5];
                        this.dateList[0].t7 = strData[6];
                    }
                    if(strData.length==9){
                        this.controlForm[0].deviceGroup = strData[8];

                        this.controlForm[0].t1 = this.formatTime(strData[0],'t');
                        this.controlForm[0].m1 = strData[1];
                        this.controlForm[0].c1 = this.formatTime(strData[0]);

                        this.controlForm[0].t2 = this.formatTime(strData[2],'t');
                        this.controlForm[0].m2 = strData[3];
                        this.controlForm[0].c2 = this.formatTime(strData[2]);

                        this.controlForm[0].t3 = this.formatTime(strData[4],'t');
                        this.controlForm[0].m3 = strData[5];
                        this.controlForm[0].c3 = this.formatTime(strData[4]);

                        this.controlForm[0].t4 = this.formatTime(strData[6],'t');
                        this.controlForm[0].m4 = strData[7];
                        this.controlForm[0].c4 = this.formatTime(strData[6]);
                    }
                    console.log(this.controlForm)
                    if(this.isCheckTime){
                        this.$message.success(JSON.parse(data).message);
                    }
                });


            },
            readTime(v){

                if(this.isGroup){
                    if(!this.dateList[0].deviceGroup){
                        this.$message.error('请填写群组号');
                        return ;
                    }
                }else{
                    if(!this.dateList[0].deviceCode){
                        this.$message.error('请填写编号');
                        return ;
                    }
                }

                if(!this.dateList[0].colector){
                    this.$message.error('请选择网关');
                    return ;
                }

                var str='';
                if(v==1){
                    console.log('读取时间')
                    this.isCheckTime = false;
                    str = 'readBreakerTime,'+this.dateList[0].colector+','+(parseInt(this.dateList[0].deviceCode)+1);
                }else{
                    this.isCheckTime = true;

                    if(!this.dateList[0].t1){
                        this.$message.error('请填写秒');
                        return ;
                    }
                    if(!this.dateList[0].t2){
                        this.$message.error('请填写分');
                        return ;
                    }
                    if(!this.dateList[0].t3){
                        this.$message.error('请填写时');
                        return ;
                    }
                    if(!this.dateList[0].t4){
                        this.$message.error('请填写日');
                        return ;
                    }
                    if(!this.dateList[0].t5){
                        this.$message.error('请填写月');
                        return ;
                    }
                    if(!this.dateList[0].t6){
                        this.$message.error('请填写周');
                        return ;
                    }
                    if(!this.dateList[0].t7){
                        this.$message.error('请填写年');
                        return ;
                    }

                    str = 'setBreakerTime,'+this.dateList[0].colector+','+(this.isGroup?this.dateList[0].deviceGroup:(parseInt(this.dateList[0].deviceCode)+1))+','+
                    this.dateList[0].t1+','+this.dateList[0].t2+','+this.dateList[0].t3+','+this.dateList[0].t4+','+
                        this.dateList[0].t5+','+this.dateList[0].t6+','+this.dateList[0].t7;
                    console.log('设置时间')
                }
                console.log(this.dateList)

                this.socketApi.sendSock(this,str,(data)=>{
                    this.getData();
                    var strData = JSON.parse(data).message.split(',');
                    console.log(strData);
                    if(strData.length==7){
                        this.dateList[0].t1 = strData[0];
                        this.dateList[0].t2 = strData[1];
                        this.dateList[0].t3 = strData[2];
                        this.dateList[0].t4 = strData[3];
                        this.dateList[0].t5 = strData[4];
                        this.dateList[0].t6 = strData[5];
                        this.dateList[0].t7 = strData[6];
                    }
                    if(strData.length==9){
                        this.controlForm[0].deviceGroup = strData[8];

                        this.controlForm[0].t1 = this.formatTime(strData[0],'t');
                        this.controlForm[0].m1 = strData[1];
                        this.controlForm[0].c1 = this.formatTime(strData[0]);

                        this.controlForm[0].t2 = this.formatTime(strData[2],'t');
                        this.controlForm[0].m2 = strData[3];
                        this.controlForm[0].c2 = this.formatTime(strData[2]);

                        this.controlForm[0].t3 = this.formatTime(strData[4],'t');
                        this.controlForm[0].m3 = strData[5];
                        this.controlForm[0].c3 = this.formatTime(strData[4]);

                        this.controlForm[0].t4 = this.formatTime(strData[6],'t');
                        this.controlForm[0].m4 = strData[7];
                        this.controlForm[0].c4 = this.formatTime(strData[6]);
                    }
                    if(this.isCheckTime){
                        this.$message.success(JSON.parse(data).message);
                    }
                });

            },

            formatTime(V,t){
                var bit7 =1,bit6 =1,a = 0x3F;
                bit6=bit6<<6; bit6=bit6&V;
                bit7=bit7<<7; bit7=bit7&V;
                a=a&V;
                if(t=='t'){return ''+a;
                }else{return (bit6>>6);}
            },
        }
    }
</script>

<style scoped>
    /deep/ .no-border-input input.el-input__inner{
        border: 0;

    }
</style>
